<!--
 * @Author: WangGuojian 1085844536@qq.com
 * @Date: 2023-04-13 00:35:22
 * @LastEditTime: 2023-04-13 00:43:38
 * @LastEditors: WangGuojian 1085844536@qq.com
 * @FilePath: \guigu-oa\vue\03-axios.html
 * @Description:
-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <script src="vue.min.js"></script>
        <script src="axios.min.js"></script>

        <div id="app"></div>

        <script>
            new Vue({
                el: '#app',
                data: {
                    userList: [], // 列表数组
                },
                created() {
                    // 渲染之前
                    // 调用方法
                    this.getList();
                },
                methods: {
                    // axios 发送 ajax 请求
                    getList() {
                        axios
                            .get('data.json')
                            // 成功调用 then 方法，得到接口或者文件数据
                            .then((response) => {
                                // console.log(response);
                                this.userList = response.data.data;
                                console.log(this.userList);
                            })
                            // 失败调用 catch 方法
                            .catch((error) => {
                                console.log(error);
                            });
                    },
                },
            });
        </script>
    </body>
</html>
